<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>



<!--https://element.eleme.cn/#/zh-CN/component/popover -->
<div id="app16">
	<template>
		<el-popover
		placement="top-start"
		title="标题"
		width="200"
		trigger="hover"
		content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
			<el-button slot="reference">hover 激活</el-button>
		</el-popover>

		<el-popover
		placement="bottom"
		title="标题"
		width="200"
		trigger="click"
		content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
			<el-button slot="reference">click 激活</el-button>
		</el-popover>

		<el-popover
		ref="popover"
		placement="right"
		title="标题"
		width="200"
		trigger="focus"
		content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
			<el-button v-popover:popover>focus 激活</el-button>
		</el-popover>
		

		<el-popover
		placement="bottom"
		title="标题"
		width="200"
		trigger="manual"
		content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
		v-model="visible">
			<el-button slot="reference" @click="visible = !visible">手动激活</el-button>
		</el-popover>
	</template>
</div>

<script type="text/javascript">
	//组件初始化
	var Main = {
		data() {
			return {
				visible: false
			};
		}
	}
	var Ctor = Vue.extend(Main);
	new Ctor().$mount('#app16');
</script>